let tableObj = {};
let schArr = ['本科','大专','硕士','博士'];

$('[name="Name"]').change(function(){
    let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
    let str = $('[name="Name"]').val();
    
    if(reg.test(str) === false){
        $('[class="div1"]').addClass('br_red');
        return;
    }
    else{
        $('[class="div1"]').removeClass('br_red');
    }
    
});

$('[name="phone"]').change(function(){
    let reg = /^('+86')?0?1\d{10}$/;
    let str = $('[name="phone"]').val();
    if(reg.test(str) === false){
        $('[class="div2"]').addClass('br_red');
        return;
    }
    else{
        $('[class="div2"]').removeClass('br_red');
    }
});
$('[name="sch"]').change(function(){
    let res = schArr.some( item => item === $('[name="sch"]').val());
    if(res === true){
        $('[class="div3"]').addClass('br_gre').removeClass('br_red');
    }
    else{
        $('[class="div3"]').addClass('br_red').removeClass('br_gre');
        return;
    }
})


$('.form').submit(function(){
    event.preventDefault();
    
});
$('[name="baocun"]').click(function(){
    let wirteObj = window.localStorage.getItem('info');
    if(wirteObj === null){
        let userName = $('[name="name"]').val();
        if(userName !== ''){
            tableObj.userName = userName;
        }
        else{
            return;
        }
        let userPhone = $('[name="phone"]').val();
        if(userPhone !== ''){
            tableObj.userPhone = userPhone;
        }
        else{
            return;
        }
        let userSch = $('[name="sch"]').val();
        if(userSch !== ''){
            tableObj.userSch = userSch;
        }
        else{
            return;
        }
        let userAge = $('[name="age"]').val();
        if(userAge !== ''){
            tableObj.userAge = userAge;
        }
        else{
            return;
        }
        let userSoldry = $('[name="soldry"]').val();
        if(userSoldry !== ''){
            tableObj.userSoldry = userSoldry;
        }
        else{
            return;
        }

        window.localStorage.info = JSON.stringify([tableObj]);
    }
    else{
            wirteObj = JSON.parse(wirteObj);
        
            let userName = $('[name="Name"]').val();
        if(userName !== ''){
            tableObj.userName = userName;
        }
        else{
            return;
        }
        let userPhone = $('[name="phone"]').val();
        if(userPhone !== ''){
            tableObj.userPhone = userPhone;
        }
        else{
            return;
        }
        let userSch = $('[name="sch"]').val();
        if(userSch !== ''){
            tableObj.userSch = userSch;
        }
        else{
            return;
        }
        let userAge = $('[name="age"]').val();
        if(userAge !== ''){
            tableObj.userAge = userAge;
        }
        
        else{
            return;
        }
        let userSoldry = $('[name="soldry"]').val();
        if(userSoldry !== ''){
            tableObj.userSoldry = userSoldry;
        }
        else{
            return;
        }
            wirteObj.push(tableObj);
            window.localStorage.info = JSON.stringify(wirteObj);
        
        }
        setPage();
        
});
  
let oTbody = document.querySelector('tbody');
oTbody.addEventListener('click',function(event){
    let info = window.localStorage.info;
    info = JSON.parse(info);
    if(event.target.getAttribute('name') === 'del'){
        if(!window.confirm('你确定删除这行么')) return;
        info.splice(Number(event.target.getAttribute('index')),1);
        window.localStorage.info = JSON.stringify(info);
        setPage();
    }
    if(event.target.getAttribute('name') === 'fix'){
        $('.mask').addClass('disbl');
        $('[name="fixed"]').click(function(){
    let userName = $('[name="Name"]').val();
        if(userName !== ''){
            tableObj.userName = userName;
        }
        else{
            return;
        }
        let userPhone = $('[name="phone"]').val();
        if(userPhone !== ''){
            tableObj.userPhone = userPhone;
        }
        else{
            return;
        }
        let userSch = $('[name="sch"]').val();
        if(userSch !== ''){
            tableObj.userSch = userSch;
        }
        else{
            return;
        }
        let userAge = $('[name="age"]').val();
        if(userAge !== ''){
            tableObj.userAge = userAge;
        }
        else{
            return;
        }
        let userSoldry = $('[name="soldry"]').val();
        if(userSoldry !== ''){
            tableObj.userSoldry = userSoldry;
        }
        else{
            return;
        }
        info.splice(Number(event.target.getAttribute('index')),1,tableObj);
            window.localStorage.info = JSON.stringify(info);
            $('.mask').removeClass('disbl')
            setPage();
});
    }
});

$('[name="Nform"]').submit(function(){
    event.preventDefault();
});

$('[name="close"]').click(function(){
    $('.mask').removeClass('disbl');
})


function setPage(){
    let info = window.localStorage.getItem('info');
    let oTbody = document.querySelector('tbody');
    let str = ``;
    info = JSON.parse( info );

    if(info.length === 0){
        $('tbody').html('<tr><td colspan = "6" style="text-align:center">请加载数据</td></tr>');
       
    }
    else{
        
        console.log(info);
        info.forEach((item,key) => {
            str += `
            <tr>
                <td>${item.userName}</td>
                <td>${item.userPhone}</td>
                <td>${item.userSch}</td>
                <td>${item.userAge}</td>
                <td>${item.userSoldry}</td>
                <td><button name="fix" class="m" index="${key}">修改</button><button class="d" name="del" index="${key}">删除</button></td>
            </tr>`;
        });
        oTbody.innerHTML = str;
        
    }
    
}
$('[name="reset"]').click(function(){
    $('[class="div1"]').removeClass('br_red');
    $('[class="div2"]').removeClass('br_red');
    $('[class="div3"]').removeClass('br_gre');
    $('[class="div3"]').removeClass('br_red');
});